<template>
  <div>
    <div
        style="
        border-bottom: 1px solid #e3e3e3;
        font-size: 16px;
        padding: 20px;
        text-align: center;">


      产品类目
    </div>
    <van-search v-model="value" placeholder="请输入搜索关键词" />

<!--    1. `v-model="value"`：这是Vue.js中的双向数据绑定语法，表示将组件的值与名为`value`的数据属性进行绑定。-->
<!--    当用户在搜索框中输入内容时，`value`的值会自动更新为输入的内容。-->

<!--    2. `placeholder="请输入搜索关键词"`：这是设置搜索框的占位符文本，当搜索框为空时会显示该文本提示用户输入搜索关键词。-->
<!--    这段代码的作用是创建一个带有搜索功能的搜索框组件，用户可以在其中输入关键词进行搜索。-->

    <div
        style="
        flex-wrap: wrap;
        padding: 20px;
        display: flex;
        justify-content: space-between;
      "
    >
      <div
          v-for="(i, index) in categorys"
          :key="index"
          style="
          width: calc((100vw - 130px) / 2);
          margin-right: 10px;
          margin-bottom: 10px;
          border-radius: 15px;
          text-align: center;
          padding: 20px;
        "
          :style="{
          border: `1px solid ${i.color}`,
          backgroundColor: i.color,
          backgroundSize: cover,
        }"
      >

<!--        这段代码是一个Vue.js的模板，其中包含了一个`div`元素。-->
<!--        该元素使用了`v-for`指令来遍历名为`categorys`的数据数组，并为每个元素生成一个对应的`div`。-->

<!--        具体来说，`v-for="(i, index) in categorys"`表示使用`categorys`数组中的每个元素和它的索引值进行循环，-->
<!--        将当前元素的值赋给变量`i`，将当前元素的索引值赋给变量`index`。-->

<!--        在`div`元素中，使用了`:key="index"`来指定每个`div`的唯一标识符，这里使用了数组的索引值作为唯一标识符。-->

<!--        接下来是一些内联样式的设置，包括宽度、外边距、边框圆角、文本对齐方式和内边距等。-->
<!--        这些样式通过`style`属性直接写在了`div`元素上。-->

<!--        最后，还使用了`:style`绑定了一个对象，其中包含了边框颜色和背景颜色等样式属性。-->
<!--        这些样式属性的值是通过计算得到的，根据当前元素的`color`属性值来确定。-->
        <div>
          <img :src="i.img" style="border-radius: 15px; width: 100%" />
        </div>
        <div>
          <span>{{ i.name }}</span>
<!--          这段代码是一个Vue.js的模板，其中包含了两个`span`元素。-->
<!--          这两个`span`元素都使用了插值表达式`{{ i.name }}`来显示名为`i`的对象中的`name`属性的值。-->

<!--          具体来说，第一个`span`元素的文本内容为`{{ i.name }}`，第二个`span`元素的文本内容也为`{{ i.name }}`。-->
<!--          这意味着这两个`span`元素的文本内容都是相同的，它们会显示同一个对象的`name`属性的值。-->
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { showDialog } from "vant";
import { userStore } from "../store/piniaStore";
import { myMixin } from "../mixin.js";

const { errorMsgBox, successMsgBox } = myMixin();
const useUserStore = userStore();
const router = useRouter();

let categorys = useUserStore.categorys;
// 这段代码是使用Vue.js和Pinia库编写的。它导入了一些必要的模块和函数，并定义了一些变量和函数。
//
// 首先，它从"vue"模块中导入了`ref`和`reactive`函数。这些函数用于创建响应式的数据对象。
//
// 然后，它从"vue-router"模块中导入了`useRouter`函数。这个函数用于获取当前路由实例，以便在组件中使用路由功能。
//
// 接下来，它从"vant"库中导入了`showDialog`函数。这个函数用于显示对话框。
//
// 然后，它从"../store/piniaStore"模块中导入了`userStore`对象。这个对象是一个Pinia存储，用于管理用户相关的数据状态。
//
// 接着，它从"../mixin.js"模块中导入了`myMixin`对象。这个对象是一个混合（mixin），包含了一些自定义的方法和属性。
//
// 然后，它从`myMixin`对象中解构出了`errorMsgBox`和`successMsgBox`两个方法。这两个方法分别用于显示错误消息框和成功消息框。
//
// 接下来，它调用了`userStore()`函数来创建一个Pinia存储的实例，并将其赋值给`useUserStore`变量。
//
// 最后，它调用了`useRouter()`函数来获取当前路由实例，并将其赋值给`router`变量。
//
// 这段代码的目的是初始化一些变量和函数，以便在后续的代码中使用它们。
</script>